<template>
  <el-dialog
    :title="Clients.id?'编辑分类':'新增分类'"
    :visible="isShowDislog"
    :close-on-click-modal="false"
    @close="isCancel"
  >
    <el-form ref="form" :model="Clients" :rules="rules" label-width="80px">
      <el-form-item label="经纪人">
        <el-select v-model="Clients.agent.id" placeholder="请选择" style="margin-bottom:10px;width:150px">
          <el-option
            v-for="item in agentsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-input v-model="Clients.name" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="Clients.email" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="Clients.phone" />
      </el-form-item>
      <el-form-item label="微信" prop="wechat">
        <el-input v-model="Clients.wechat" />
      </el-form-item>
      <el-form-item label="介绍" prop="desc">
        <el-input v-model="Clients.desc" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item label="封面">
        <ImagesUpload ref="ImagesUpload" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="danger" size="small" @click="isCancel">取消</el-button>
      <el-button type="primary" size="small" @click="isOK">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getAgents } from '@/api/agents'
import ImagesUpload from '@/components/ImagesUpload'
import { getClientApi, editClientsApi, addClientsApi } from '@/api/client'
export default {
  components: {
    ImagesUpload
  },
  props: {
    isShowDislog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      agentsList: [],
      Clients: {
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        agent: {}
      },
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }],
        phone: [{ required: true, message: '电话不能为空', trigger: 'blur' },
          { pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
        wechat: [{ required: true, message: '微信不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '介绍不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getAgents()
  },
  methods: {
    async getAgents() {
      this.agentsList = await getAgents()
    },
    // 确定
    async isOK() {
      await this.$refs.form.validate()
      // console.log(this.$refs.ImagesUpload.fileList)
      const fileList = this.$refs.ImagesUpload.fileList
      const url = fileList[0] ? fileList[0].url : ''
      if (!url) {
        this.$message.warning('请上传封面')
        return
      }
      this.Clients.image = url
      if (this.Clients.id) {
        // 编辑
        await editClientsApi(this.Clients)
        this.$message.success('编辑成功')

        this.$parent.getEditing(this.Clients)
      } else {
        // 新增
        await addClientsApi(this.Clients)
        this.$message.success('新增成功')

        this.$parent.getAdding()
      }

      this.$emit('update:isShowDislog', false)
    },
    // 数据回显
    async getCategory(id) {
      const res = await getClientApi(id)
      // console.log(res)
      this.Clients = res
    },
    getImage() {
      this.$refs.ImagesUpload.fileList.push({ url: this.Clients.image })
    },

    // 取消
    isCancel() {
      this.$refs.form.resetFields()
      this.$refs.ImagesUpload.fileList = []
      this.Clients = {
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        agent: {}}
      this.$emit('update:isShowDislog', false)
    },

    // 移除图片触发
    handleRemove() {}
  }
}

</script>

<style>

</style>
